<template>
  <div class="qrcode-login">
    <div class="qrcode-wrapper" v-loading="loadingQrcode">
      <img class="qrcode" :src="qrcode ? qrcode : HomeQRCode" alt="登录二维码" @click="refreshQRCode" />
      <div class="status-cover" v-if="isShowStatusCover" @click="refreshQRCode">
        <div>{{ statusMessage }}</div>
      </div>
    </div>
    <div class="scan-tips">
      使用微信扫描二维码
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as QRCode from "qrcode";
import { getQRCode, getQRCodeStatus } from "@/api/login";
import HomeQRCode from "@/assets/login/home_qrcode.png";
import store from "@/store";
const emits = defineEmits(["login"]);

const tag = ref<string>('')
const qrcode = ref()
const loadingQrcode = ref(true)
const _getQRCode = async () => {
  loadingQrcode.value = true
  const rs = await getQRCode({ app: 'merchant' })
  loadingQrcode.value = false

  if (rs.code === 200) {
    qrcode.value = await QRCode.toDataURL(rs.payload?.qrCode ?? '', { margin: 0 })
    tag.value = rs.payload?.tag ?? ''
  } else {
    showStatusCover()
  }
}

const isShowStatusCover = ref(false)
const statusMessage = ref('')
const statusType = ref<'info' | 'warning' | 'error'>('info')
const showStatusCover = (message = '', type?: 'info' | 'warning' | 'error') => {
  isShowStatusCover.value = true
  statusMessage.value = message
  statusType.value = type ?? 'info'
}
const hideStatusCover = () => {
  isShowStatusCover.value = false
  statusMessage.value = ''
}

const qrcodeStatus = ref<'wait' | 'scanned' | 'finished'>('wait')
const userInfo = ref()
const _getQrcodeStatus = async () => {
  const rs = await getQRCodeStatus({ qrCode: qrcode.value, tag: tag.value })

  if (rs.code === 200) {
    qrcodeStatus.value = rs.payload?.status ?? 'scanned'
    userInfo.value = rs.payload?.sessionUser ?? {}
    if (qrcodeStatus.value === 'scanned') {
      showStatusCover('已扫码')
    } else if (qrcodeStatus.value === 'finished') {
      showStatusCover('已确认登录')
      handleLogin()
    } else {
      // wait
    }
  } else {
    clearInterval(checkStatusTimer)
    showStatusCover('登录二维码已过期，点击刷新')
  }
}

const handleLogin = () => {
  clearInterval(checkStatusTimer)
  emits("login",userInfo.value)
}

let checkStatusTimer: ReturnType<typeof setInterval>
const checkQrcodeStatus = () => {
  clearInterval(checkStatusTimer)
  checkStatusTimer = setInterval(() => {
    _getQrcodeStatus()
  }, 1500)
}

const refreshQRCode = () => {
  hideStatusCover()
  _getQRCode()
  checkQrcodeStatus()
}

onMounted(() => {
  _getQRCode()
  checkQrcodeStatus()
})

onUnmounted(() => {
  clearInterval(checkStatusTimer)
})
</script>

<style scoped lang="scss">
.qrcode-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-wrapper {
  width: 200px;
  height: 200px;
  background: white;
  margin-top: 40px;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #DCDFE6;

  .qrcode {
    width: 100%;
    height: 100%;
  }
}

.status-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230, 230, 230, 0.9);
  color: var(--el-color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scan-tips {
  text-align: center;
  color: #7F858B;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 30px;
}
</style>
